var swiper = new Swiper('.mySwiper', {
	slidesPerView: 'auto',
	spaceBetween: 10,
	centeredSlides: true,
	loop: true,
});
$('.js-item1').click(function() {
	$('.js-item1 .s-tit').addClass('active')
	$('.js-item2 .s-tit').removeClass('active')
	$('.js-item3 .s-tit').removeClass('active')
	swiper.slideTo(0); //切换到第一个slide，速度为1秒
})
$('.js-item2').click(function() {
	$('.js-item1 .s-tit').removeClass('active')
	$('.js-item2 .s-tit').addClass('active')
	$('.js-item3 .s-tit').removeClass('active')
	swiper.slideTo(1); //切换到第一个slide，速度为1秒
})
$('.js-item3').click(function() {
	$('.js-item1 .s-tit').removeClass('active')
	$('.js-item2 .s-tit').removeClass('active')
	$('.js-item3 .s-tit').addClass('active')
	swiper.slideTo(2); //切换到第一个slide，速度为1秒
})
let a = 1 // 设置一个初始值，
let DOMobj = '' // 用了保存getElementById获取到的元素数据
let clientData = this.getViewport() // 获取可视区的大小
function getViewport() {
	if (document.compatMode == "BackCompat") {
		return {
			width: document.body.clientWidth,
			height: document.body.clientHeight
		}
	} else {
		return {
			width: document.documentElement.clientWidth,
			height: document.documentElement.clientHeight
		}
	}
}

function getDMOlocation() { // 获取元素的相关数据
	DOMobj = document.getElementById(`arr${a}`)
	cliHeight = (clientData.height - DOMobj.offsetHeight) / 2
}
window.onload = this.getDMOlocation()

function getElementViewTop(element) {
	var actualTop = element.offsetTop;
	var current = element.offsetParent;

	while (current !== null) {
		actualTop += current.offsetTop;
		current = current.offsetParent;
	}

	if (document.compatMode == "BackCompat") {
		var elementScrollTop = document.body.scrollTop;
	} else {
		var elementScrollTop = document.documentElement.scrollTop;
	}

	return actualTop - elementScrollTop;
}
window.addEventListener('scroll', winScroll);

function winScroll(e) {
	let arr = this.getElementViewTop(DOMobj)
	let viedos = document.getElementById(`video-${a}`)
	console.log(arr)
	if (arr <= cliHeight && -arr <= DOMobj.offsetHeight / 2) {
		viedos.play()
	} else {
		viedos.pause()
		if (-arr > DOMobj.offsetHeight / 2) {
			a += 1
		} else if (-arr < 0) {
			if (a === 1) {
				return
			} else {
				a -= 1
			}
		}
		this.getDMOlocation()
	}
};

